<template>
  <div>
    <!-- 查询 -->
    <el-container>
      <el-header>
        <p>查询</p>
      </el-header>
      <el-main>
        <span>搜索</span>
        <el-input
          v-model="title"
          placeholder="可以根据菜品名称进行搜索"
          size="mini"
        ></el-input>

        <span> 筛选 </span>
        <el-select v-model="value" placeholder="全部" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="onSearch" id="btn">搜索</el-button>
        <el-button type="primary" @click="onReset">重置</el-button>
      </el-main>
    </el-container>

    <!-- 菜品库存 -->
    <el-container>
      <el-header>
        <p>菜品库存</p>
        <!-- <button>导出</button> -->
      </el-header>

      <el-container>
        <el-aside width="180px">
          <el-table
            ref="multipleTable"
            :data="foodData"
            :cell-style="{ border: '1px solid #DCDCDC' }"
            :header-cell-style="{
              background: '#F0F0F0',
              border: '1px solid #DCDCDC',
              color: '#000000',
            }"
            id="aside"
          >
            <el-table-column
              prop="category"
              label="菜品类别"
              align="center"
            ></el-table-column>
          </el-table>
        </el-aside>

        <!-- 表格 -->
        <el-main>
          <el-table
            :data="tableData"
            border
            stripe
            tooltip-effect="dark"
            :cell-style="{ border: '1px solid #DCDCDC' }"
            :header-cell-style="{
              background: '#F0F0F0',
              border: '1px solid #DCDCDC',
              color: '#000000',
            }"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="check_num"
              label="序号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="menu_name"
              label="菜品名称"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="menu_size"
              label="菜品单位"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="menu_amount"
              label="库存"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="check_time"
              label="盘点时间"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column label="库存过底线" width="100" align="center"
              >10</el-table-column
            >
            <el-table-column label="库存超出线" width="100" align="center"
              >50</el-table-column
            >
            <el-table-column fixed="right" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >调整记录</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleChange(scope.row)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 页码 -->
          <el-pagination
            :total="total"
            :page-size="count"
            @current-change="pageChange"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            layout="total,sizes,prev, pager, next, jumper"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改的弹框 -->
    <el-dialog title="修改" :visible.sync="changeVisible" width="30%" center>
      <el-form ref="form" v-model="changeData" label-width="110px">
        <el-form-item label="菜品名称">
          <el-input size="medium" v-model="changeData.menu_name"></el-input>
        </el-form-item>
        <el-form-item label="*库存数量">
          <el-input size="medium" v-model="changeData.menu_amount"></el-input>
        </el-form-item>
        <el-form-item label="*库存过底线">
          <el-input
            size="medium"
            v-model="changeData.bottom"
            placeholder="20"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="*库存超出线">
          <el-input
            size="medium"
            v-model="changeData.out"
            placeholder="20"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onChangeOk">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 调整记录的弹框 -->
    <el-dialog title="调整" :visible.sync="TableVisible" width="50%" center>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" id="btn2">查询</el-button>
      </div>

      <el-table :data="gridData">
        <el-table-column
          property="time"
          label="时间"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          property="dishName"
          label="菜品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          property="preInventory"
          label="修改前库存"
          align="center"
        ></el-table-column>
        <el-table-column
          property="chaInventory"
          label="库存变动"
          align="center"
        ></el-table-column>
        <el-table-column
          property="people"
          label="操作人"
          align="center"
          fixed="right"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
span {
  margin-right: 10px;
}
#btn {
  margin-left: 30px;
}
#btn2 {
  margin-left: 30px;
}
.block{
  margin-left: 40px;
}
#aside {
  margin-top: 20px;
}
.el-container {
  width: 100%;
  border: 2px solid rgb(242, 242, 242);
}
.el-header {
  background-color: rgb(242, 242, 242);
  color: rgb(51, 51, 51);
  font-size: 26px;
  line-height: 60px;
}
p {
  margin-left: 20px;
}
.el-main {
  padding: 20px;
}
.el-input {
  width: 200px;
  margin-right: 100px;
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
<script>
export default {
  data: function () {
    return {
      title: "",
      search: "",

      value1: [new Date(2022, 2, 17, 10, 10), new Date(2022, 10, 11, 10, 10)],
      // 菜品类别数据
      foodData: [
        {
          category: "炒菜",
        },
        {
          category: "蒸菜",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "库存过高",
        },
        {
          value: "选项3",
          label: "库存过低",
        },
      ],
      totalData: [],
      //下拉框的value值
      value: "",
      changeVisible: false,
      changeData: {
        menu_name: "",
        menu_amount: "",
        bottom: 20,
        out: 20,
      },
      TableVisible: false,
      gridData: [
        {
          time: "2022-03-16",
          dishName: "土豆丝",
          preInventory: "20",
          chaInventory: "30",
          people: "小侯",
        },
      ],
      page: 1,
      count: 5,
    };
  },
  methods: {
    pageChange: function (n) {
      this.page = n;
    },
    getshuju: function (num) {
      let arr1 = [];
      this.$axios({
        url: "/hyl/foodstock/getSearch",
        method: "post",
        data: { menu_amount: num },
      }).then((res) => {
        arr1 = res.data.data;
        this.totalData = arr1;

        this.totalData.forEach((v) => {
          v.check_time = v.check_time
            .replace(/T/g, " ")
            .slice(0, v.check_time.replace(/T/g, " ").indexOf("."));
          return v;
        });

        if (res.data.code == 200) {
          this.$message({
            message: "查询成功",
            type: "success",
          });
        }
        return arr1.slice((this.page - 1) * this.count, this.page * this.count);
      });
    },
    onSearch: function () {
      this.page = 1;
      console.log(this.value);
      if (this.value == "选项2") {
        this.getshuju(50);
      }

      if (this.value == "选项3") {
        this.getshuju(10);
      }

      if (this.title.trim()) {
        this.search = this.title;
      } else {
        this.search = "";
      }
    },
    onReset: function () {
      this.page = 1;
      this.gettable();
      this.title = "";
      this.search = "";
      this.value = "";
    },
    onChoose: function () {},
    //点击修改按钮  弹出弹框
    handleChange: function (data) {
      this.changeVisible = true;
      this.changeData = data;
    },
    //点击取消弹框消失
    handleClose: function () {
      this.changeVisible = false;
    },
    //点击修改弹框的确定按钮  弹框消息并提示修改成功
    onChangeOk: function () {
      this.$axios({
        url: "/hyl/foodstock/updateInventory",
        method: "post",
        data: this.changeData,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.changeVisible = false;
          this.gettable();
        }
        console.log(res);
      });
    },
    handleClick: function () {
      this.TableVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    gettable: function () {
      this.$axios({
        url: "/hyl/foodstock/getInventory",
      }).then((res) => {
        // console.log(res.data);
        this.totalData = res.data.data;

        this.totalData.forEach((v) => {
          v.check_time = v.check_time
            .replace(/T/g, " ")
            .slice(0, v.check_time.replace(/T/g, " ").indexOf("."));
          return v;
        });
      });
    },
  },

  mounted() {
    this.gettable();
  },
  computed: {
    total: function () {
      if (this.search) {
        let arr = this.totalData.filter((v) => {
          if (v.menu_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.length;
      } else {
        return this.totalData.length;
      }
    },
    tableData: function () {
      if (this.search) {
        let arr = this.totalData.filter((v) => {
          if (v.menu_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        // console.log(this.totalData);
        return this.totalData.slice(
          (this.page - 1) * this.count,
          this.page * this.count
        );
      }
    },
  },
};
</script>
